<template>
  <div>
    <div class="console" id="terminal"></div>
    <el-row class="terminal-div">
      <el-button type="primary" size="small" plain @click="getBig()">放大控制台</el-button>
      <el-button type="success" size="small" plain @click="getSmall()">缩小控制台</el-button>
      <el-button type="info" size="small" @click="getGo()">返回列表</el-button>
    </el-row>
  </div>
</template>
<script>
import Terminal from "./Xterm";
export default {
  name: "Console",
  props: {
    terminal: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      term: null,
      terminalSocket: null,
      url: "ws://127.0.0.1:3000/ws",
      ip: "",
      user: "",
      pass: "",
      port: ""
    };
  },
  created() {
    this.ip = this.$cookies.get("ip");
    this.user = this.$cookies.get("user");
    this.pass = this.$cookies.get("pass");
    this.port = this.$cookies.get("port");
  },
  methods: {
    runRealTerminal() {
      console.log("webSocket is finished");
    },
    errorRealTerminal() {
      console.log("error");
    },
    closeRealTerminal() {
      console.log("close");
    },
    getGo(){
      this.$cookies.remove("ip")
      this.$cookies.remove("user")
      this.$cookies.remove("pass")
      this.$cookies.remove("port")
      this.$router.push("/platform");
    },
    getBig(){
      let terminalContainer = document.getElementById("terminal");
      let terminalXterm = terminalContainer.getElementsByClassName(
        "xterm-screen"
      )[0];

      if(terminalXterm.style.width < "946px"){
        terminalXterm.style.width = "80%";
        terminalXterm.style.height = "580px";
      }
    },
    getSmall(){
      let terminalContainer = document.getElementById("terminal");
      let terminalXterm = terminalContainer.getElementsByClassName(
        "xterm-screen"
      )[0];

      if(terminalXterm.style.width = "946px"){
        terminalXterm.style.width = "720px";
        terminalXterm.style.height = "408px";
      }
    },
    // 初始化
    getStyle() {
      let terminalContainer = document.getElementById("terminal");
      let terminalCanvas = terminalContainer.getElementsByTagName("canvas");
      console.log(terminalCanvas.length);
      for (var i = 0; i < terminalCanvas.length; i++) {
        terminalCanvas[i].style.width = "100%";
        terminalCanvas[i].style.height = "100%";
      }
    },
  },
  mounted() {
    console.log("pid : " + this.terminal.pid + " is on ready");
    let terminalContainer = document.getElementById("terminal");
    this.term = new Terminal();
    this.term.open(terminalContainer);

    // open websocket
    let str = this.url + "/" + this.ip + "/" + this.user + "/" + this.pass + "/" + this.port;
    this.terminalSocket = new WebSocket(str);
    this.terminalSocket.onopen = this.runRealTerminal;
    this.terminalSocket.onclose = this.closeRealTerminal;
    this.terminalSocket.onerror = this.errorRealTerminal;
    this.term.attach(this.terminalSocket);
    this.term._initialized = true;
    console.log("mounted is going on");
    this.getStyle();
  },
  beforeDestroy() {
    this.terminalSocket.close();
    this.term.destroy();
  },
};
</script>

<style scoped>
#terminal {
  padding: 8px;
  background-color: #000000;
}
.terminal-div {
  padding: 10px 6px;
}
/* .terminal-div > button {
  padding: 6px 16px;
  margin-right: 10px;
} */
</style>
